<template>
	<view class="index" >
		<view class="index-bg">
			
		</view>
		<view class="index-header-bg">


			<view class="index-header"
				:style="{top:header.top - 1 +  'px',height:header.height +'px',width:header.left + 'px'}">
				<text @click="cityBtn">{{city}}▼</text>
				<view class="index-header-search" :style="{height:header.height - 10 +'px'}">

				</view>
				<image src="../../static/ditu.png" mode="" :style="{height:header.height +'px',width:30 + 'px'}" @click="mapBtn">
				</image>
			</view>
		</view>

		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="index-swiper":style="{paddingTop:header.top +30 + 'px'}"> 
			<swiper-item>
				<view class="swiper-item">
					<image
						src="//img10.360buyimg.com/pop/s1180x940_jfs/t1/220389/5/15245/73548/62344962Ee7e6fc80/e4cfb79283de0783.jpg.webp"
						mode=""></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image
						src="//imgcps.jd.com/ling4/3482805/57K-6YCJ5riF5rSB5aW954mp/54iG5qy-55u06ZmN/p-5bd8253082acdd181d02fa28/c0f556db/cr/s/q.jpg"
						mode=""></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image
						src="//imgcps.jd.com/img-cubic/creative_server_cie/v2/2000367/66750798228/FocusFullshop/CkNqZnMvdDEvOTkwMzUvMTYvMjcyMTYvMzA1Mjc1LzYyNDc1N2YyRTA4ODU4MzVhL2RmY2NmY2M0NmY1Nzc3ZDkucG5nEgk0LXR5XzBfNTUwAjjvi3pCEwoPU0NBUlBB55m75bGx6Z6LEAFCEAoM54mp576O5Lu35buJEAJCEAoM56uL5Y2z5oqi6LStEAZCBwoD5oqiEAdYlLOh1fgB/cr/s/q.jpg"
						mode=""></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image
						src="//imgcps.jd.com/ling4/6261970/5pil5a2j5aSH5aW96LSn/5aW954mp5L2O6IezN-aKmA/p-5bd8253082acdd181d02f9d3/9276291c/cr/s/q.jpg"
						mode=""></image>
				</view>
			</swiper-item>
		</swiper>


		<view class="index-icon-list">

			<view v-for="item in iconList" :key="item.name" class="index-icon">
				<image :src="'../../static'+item.img" mode=""></image>
				<text>{{item.name}}</text>
			</view>
		</view>

		<view class="index-cyclopedia">
			<view style="margin-bottom: 16px;color: #000;">房产全百科</view>
			<view class="index-cyclopedia-count">
				<view v-for="item in cyclopediaList" :key="item.name" class="index-cyclopedia-list">
					<image :src="'../../static'+item.img"></image>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>

		<view class="index-count">
			<view v-for="(item,index) in houseList" :key="index" class="index-count-list" @click="history(item)">
				<view class="index-count-list-count">
					<image :src="item.imgs" mode=""></image>
					<view class="index-count-list-text">
						<text style="font-size: 18px;font-weight: bold;">{{item.name}}</text>
						<view style="color: #bab9be;">
							<text>{{item.area}}</text>
							<text style="margin-left: 10px;">{{item.range}}</text>
						</view>
						<view style="color: #bab9be;">
							<text>{{item.type}}</text>
							<text style="margin-left: 10px;">{{item.point}}</text>
						</view>
					</view>
				</view>
				<text style="color: #c98277;">{{item.price}}/平</text>
			</view>
		
		
		
		</view>
		<view v-show="tips">
			亲,到底了哟...
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				header: {},
				city: '定位中',
				iconList: [{
						name: '新房',
						img: '/xinfang.png'
					},
					{
						name: '二手房',
						img: '/2fang.png'
					},
					{
						name: '租房',
						img: '/zufang.png'
					},
					{
						name: '卖房',
						img: '/maifang.png'
					},
					{
						name: '小区房价',
						img: '/xiaoqu.png'
					},
					{
						name: '商铺',
						img: '/shangp.png'
					},
					{
						name: '问答',
						img: '/wenda.png'
					},
					{
						name: '海外房产',
						img: '/haiwai.png'
					}
				],
				cyclopediaList: [{
						name: '查房价',
						img: '/chajia.png'
					},
					{
						name: '找经济人',
						img: '/jingjiren.png'
					},
					{
						name: '百科',
						img: '/baike.png'
					},
					{
						name: '购房资质',
						img: '/goufang.png'
					},
				],
				curPage: 1,
				houseList: [],
				tips:false,
				historyList:[],
				latitude:0,
				longitude:0
			}
		},
		onReachBottom(){
			this.curPage++
			
			this.loadData()
		},
		onLoad() {
			this.loadData()

		
			console.log(uni.getMenuButtonBoundingClientRect())
			this.header = uni.getMenuButtonBoundingClientRect()
			console.log(this.header)
			/* 
				bottom: 56
				height: 32
				left: 281
				right: 367
				top: 24
				width: 86
			 */
			// 获取位置
			uni.getLocation({
				success: (res) => {
					// console.log('当前经度',res.longitude);
					// console.log('当前纬度',res.latitude);
					this.latitude = res.latitude
					this.longitude = res.longitude

					uni.request({
						url: 'https://restapi.amap.com/v3/geocode/regeo',
						data: {
							key: 'd76eff80f8029d492388aff10c23284e',
							location: res.longitude + ',' + res.latitude
						},
						success: (res) => {
							// console.log(res.data);
							this.city = res.data.regeocode.addressComponent.city
							// console.log(this.city);
						}
					})
				}
			})
		},
		methods: {
			cityBtn(){
				uni.navigateTo({
					url:'../city/city'
				})
			},
			loadData(){
				if(this.tips) return
				uni.request({
					url: 'http://129.211.169.131:6368/gethouse',
					data: {
						page: this.curPage,
						pagesize: 8
					},
					success: (res) => {
						console.log(res);
						
						this.houseList.push(...res.data.data)
						if(res.data.data == 0){
							 this.tips = true
						}else{
							
						}
						
					}
				})
			},
			history(item){
				
				let historyList = uni.getStorageSync('history') || []
				historyList.forEach((obj,i)=>{
					if(obj.id == item.id){
						historyList.splice(i,1)
					}
				})
				
				historyList.unshift(item)
				
				uni.setStorageSync('history',historyList)
				
				console.log(uni.getStorageSync('history'));
			},
			mapBtn(){
				uni.navigateTo({
					url:'../map/map'
				})
			},
		}
	}
</script>

<style lang="less">
	.index {
		background: #ccc;
		width: 100%;
		height: 100%;
		.index-bg{
			background: #41a863;
			width: 100%;
			height: 144rpx;
			position: fixed;
			top: 0;
			left: 0;
		}
		.index-header-bg {
			background-color: #41a863;
			color: #ffff;

			.index-header {
				display: flex;
				align-items: center;
				background: #41a863;
				position: fixed;
				z-index: 999;
				.index-header-search {
					background-color: #fff;
					flex: 1;
					border-radius: 30px;
				}
			}
		}

		.index-swiper {
			height: 400rpx;
			
			image {
				width: 100%;
				height: 400rpx;
			}
		}

		.index-icon-list {
			width: 100%;
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			padding: 10rpx 0;
			background: #FFFFFF;

			.index-icon {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 25%;
				text-align: center;
				margin-bottom: 10px;

				image {
					width: 60px;
					height: 60px;
				}

			}
		}

		.index-cyclopedia {
			margin-top: 10px;
			background: #fff;
			padding: 10px;
			box-sizing: border-box;

			.index-cyclopedia-count {
				display: flex;
				justify-content: space-between;
			}

			.index-cyclopedia-list {
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.index-count-list {
			display: flex;
			justify-content: space-between;
			padding: 10rpx;
			box-sizing: border-box;
			background-color: #fff;
			align-items: center;

			.index-count-list-count {
				display: flex;

				image {
					width: 200rpx;
					height: 160rpx;
				}

			}

			.index-count-list-text {
				display: flex;
				flex-direction: column;
				margin-left: 10px;

			}
		}
	}
</style>
